<template>
	<view class="content">
		<view class="header">
		</view>
		<view class="m_index_box_new">
			<view class="m_index_box_new_container">
				<swiper class="swiper">
					<swiper-item>
						<view id="demo1">
							<a v-for="(item,index) in container1" :key="index" class="index-a" v-if="index < 5" >
								<img :src="item.imageUrl" :alt="item.title" />
								<span>{{item.title}}</span>
							</a>
						</view>
					</swiper-item>
					<swiper-item>
						<view id="demo2">
							<a v-for="(item,index) in container1" :key="index" class="index-a" v-if="index >= 5" >
								<img :src="item.imageUrl" :alt="item.title" class="" />
								<span>{{item.title}}</span>
							</a>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="m_index_skill_new">
			<view class="m_index_skill_new_container">
				<view class="m_index_skill_new_container_desc">
					<view class="m_index_skill_new_container_title"></view>
					<view class="m_index_skill_new_container_subtitle">
						限时价格
					</view>
					<view class="m_index_skill_new_container_link">
						<view class="m_index_skill_new_container_link_desc">
							去抢购
						</view>
						<view class="m_index_skill_new_container_link_img">
						</view>
					</view>
				</view>
				<scroll-view class="m_index_skill_new_container_good" scroll-x="true" scroll-left="120">
					<view id="demo1" class="m_index_skill_new_container_list" style="width: calc(250%)">
						<a v-for="(item,index) in containerList" :key="index"
							class="m_index_skill_new_container_list_item" style="width: calc(10%)">
							<img :src="item.imageUrl" :alt="item.price" class="" />
							<span>{{item.price}}</span>
						</a>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="floor love-floor">
			<scroll-view @scrolltolower="nextPage" lower-threshold="10" :scroll-y= "true" style="height: 600px;">
				<view class="m_webcomponent_recommend">
					<slot name="title"></slot>
					<view class="feeds waterfall">
						<view class="feeds_col_left">
							<view id="demo1" class="feeds_col" v-for="(item,index) in goodsList" :key="index" v-if="index % 2 == 0">
								
								<a class="goods" @click="danji(item.productSkuId)">
									<view class="goods_img bg_stamp">
										<view class="img_box">
											<view class="img_pendant">
											</view>
											<img :src="item.defaultImg"
												:alt="item.productSpu.productSpuName" class="shop_img" />
										</view>
										<view class="goods-tags goods-tags--bottom-goodsimg">
										</view>
										<view class="goods-tags goods-tags--top-goodsimg">
										</view>
									</view>
									<view class="goods_info">
										<view class="goods_name">
											{{item.productSpu.productSpuName}}
										</view>
										<view class="goods_row">
											<view class="goods_price">
												￥
												<em class="goods_price-int">{{item.price}}</em>
												.00
											</view>
										</view>
									</view>
								</a>
							</view>
						</view>
						<view class="feeds_col_right">
							<view id="demo1" class="feeds_col" v-for="(item,index) in goodsList" :key="index" v-if="index % 2 == 1">
								<a class="goods" @click="danji(item.productSkuId)">
									<view class="goods_img bg_stamp">
										<view class="img_box">
											<view class="img_pendant">
											</view>
											<img :src="item.defaultImg"
												:alt="item.productSpu.productSpuName" class="shop_img" />
										</view>
										<view class="goods-tags goods-tags--bottom-goodsimg">
										</view>
										<view class="goods-tags goods-tags--top-goodsimg">
										</view>
									</view>
									<view class="goods_info">
										<view class="goods_name">
											{{item.productSpu.productSpuName}}
										</view>
										<view class="goods_row">
											<view class="goods_price">
												￥
												<em class="goods_price-int">{{item.price}}</em>
												.00
											</view>
										</view>
									</view>
								</a>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import jpa from '../../jpa/jpa.js';
	
	import { getNavList,getSpikes,getGoodsListm } from '../../jpa/index.js';
	
	export default {
		data() {
			return {
				scrollTop: 0,
				container1: [],
				containerList: [],
				goodsList: [],
				pageIndex:1
			}
		},
		onLoad() {
			this.navList();
			this.spikes();
			this.goodsListm(this.pageIndex);
		},
		methods: {
			navList(){
				getNavList().then(data=>{
					this.container1 = [...this.container1,...data];
				})
			},
			spikes(){
				getSpikes().then(data=>{
					this.containerList = [...this.containerList,...data];
				})
			},
			goodsListm(pageIndex){
				getGoodsListm(pageIndex).then(data=>{
					console.log(data.records)
					this.goodsList = [...this.goodsList,...data.records]
					
				})
			},
			nextPage() {
				this.pageIndex +=1;
				this.goodsListm(this.pageIndex);
			},
			danji(skuId){
				uni.navigateTo({
					url:"/pages/component/detail?skuId=" + skuId,
				})
			}
		}
	}
</script>

<style>
	.m_webcomponent_recommend .feeds_col_right, .m_webcomponent_recommend .feeds .waterfall_col_right {
	    width: 50%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	}
	
	.m_webcomponent_recommend .goods-tags__item--2006 {
		display: block;
		margin-right: 0 !important;
	}

	.m_webcomponent_recommend .goods-tags__item {
		font-size: 0.6rem;
	}

	.m_webcomponent_recommend .goods-tags__item:first-child {
		margin-right: 0.025rem;
	}

	.m_webcomponent_recommend .goods_row_bottom {
		width: calc(100% - 2.5rem);
		height: 1rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		overflow: hidden;
	}

	em,
	i {
		font-style: normal;
	}

	.m_webcomponent_recommend .goods_price-int {
		font-size: 1rem;
		font-style: normal;
	}

	.m_webcomponent_recommend .goods_price {
		font-style: normal;
		font-family: JDZH-Regular, sans-serif;
		display: inline-block;
		font-size: 0.7rem;
		line-height: 1.5rem;
		color: #ff4142;
		display: flex;
	}

	.m_webcomponent_recommend .goods_row {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		height: 1.5rem;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.m_webcomponent_recommend .goods-tags__item:first-child {
		margin-right: 0.025rem;
	}

	.m_webcomponent_recommend .goods-tags__item {}

	.m_webcomponent_recommend .goods-tags__item--2021 {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 0 0.1rem;
		border-radius: 0.1rem;
		background: rgba(255, 32, 120, 0.07);
	}

	.m_webcomponent_recommend .goods-tags__item {
		font-size: 0.6rem;
	}

	.m_webcomponent_recommend .goods_row_title_bottom {
		height: 1.25rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.m_webcomponent_recommend .goods_name {
		text-align: left;
		line-height: 1.05rem;
		height: 2.1rem;
		font-size: 0.7rem;
		font-family: -apple-system, Helvetica, sans-serif;
		overflow: hidden;
		color: #434343;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		word-break: break-all;
		-webkit-box-orient: vertical;
	}

	.m_webcomponent_recommend .goods_info {
		padding: 0 0.5rem 0.5rem;
	}

	.m_webcomponent_recommend .goods-tags--top-goodsimg {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
	}

	.m_webcomponent_recommend .goods-tags {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		overflow: hidden;
		max-width: 100%;
		font-family: Arial, Helvetica, sans-serif;
	}

	.m_webcomponent_recommend .goods-tags--bottom-goodsimg {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.m_webcomponent_recommend .goods-tags {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		overflow: hidden;
		max-width: 100%;
		font-family: Arial, Helvetica, sans-serif;
	}

	.m_webcomponent_recommend .goods_img img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.m_webcomponent_recommend .goods_img .img_box .shop_img {
		position: absolute;
		z-index: 0;
		top: 0%;
		left: 0%;
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.m_webcomponent_recommend .goods_img .img_box .img_pendant {
		position: absolute;
		z-index: 1;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
	}

	.m_webcomponent_recommend .goods_img .img_box {
		position: relative;
		width: 100%;
		padding-top: 100%;
	}

	.m_webcomponent_recommend .goods .bg_stamp {
		background: #fff url(https://img10.360buyimg.com/wq/jfs/t24601/190/890984006/4559/731564fc/5b7f9b7bN3ccd29ab.png);
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: 8.625rem;
	}

	.m_webcomponent_recommend .goods {
		display: block;
		width: 100%;
		background: #ffffff;
		border-radius: 0.4rem;
		overflow: hidden;
		position: relative;
	}

	.m_webcomponent_recommend .feeds_col,
	.m_webcomponent_recommend .feeds .waterfall_col {
		padding: 0.25rem;
	}

	.m_webcomponent_recommend .feeds_col_right,
	.m_webcomponent_recommend .feeds .waterfall_col_right {
		width: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.m_webcomponent_recommend .feeds_col_left,
	.m_webcomponent_recommend .feeds .waterfall_col_left {
		width: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.m_webcomponent_recommend .feeds,
	.m_webcomponent_recommend .feeds .waterfall {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 0.25rem;
	}

	.m_webcomponent_recommend {
		--background-color: #f7f7f7;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.floor,
	body {
		background-color: #f6f6f6
	}

	.floor {
		font-size: 0;
		width: 100%;
		overflow: hidden
	}

	.m_index_skill_new_container_desc {
		float: left;
		width: -webkit-calc(22% - 2px);
		width: calc(22% - 2px);
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center
	}

	.m_index_skill_new_container_list_item span {
		display: block;
		margin-top: .35rem;
		color: #fa2c19;
		text-align: center;
		font-size: .7rem;
		font-style: normal;
		font-weight: 400;
		line-height: .7rem
	}

	.m_index_skill_new_container_list_item img {
		width: 2.65rem;
		height: 2.65rem
	}

	.m_index_skill_new_container_list_item {
		float: left;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center
	}

	.m_index_skill_new_container_list {
		height: 100%;
		position: relative;
		overflow: hidden
	}

	.m_index_skill_new_container_good {
		float: left;
		width: 78%;
		height: 4.5rem;
		margin-top: 2px;
		margin-right: 2px;
		border-radius: .6rem;
		overflow-x: scroll;
		background: #fff;
		padding: .5rem 0 .3rem;
		box-sizing: border-box
	}

	.m_index_skill_new_container_link_img:after {
		content: " ";
		position: absolute;
		left: 1px;
		top: .2rem;
		width: .5rem;
		height: .5rem;
		background-image: url(https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png);
		background-repeat: no-repeat;
		background-size: 100% 100%
	}

	.m_index_skill_new_container_link_img {
		display: inline-block;
		width: .6rem;
		height: .6rem;
		position: relative
	}

	.m_index_skill_new_container_link_desc {
		display: inline-block
	}

	.m_index_skill_new_container_link {
		margin-top: .45rem;
		margin-left: -.6rem;
		border-radius: .4rem;
		background: #fff;
		width: 2.65rem;
		height: .8rem;
		text-align: center;
		color: #fa2c19;
		font-size: .5rem;
		font-style: normal;
		font-weight: 400;
		line-height: .8rem
	}

	.m_index_skill_new_container_subtitle {
		color: #fff;
		width: 3.25rem;
		font-size: .6rem;
		font-style: normal;
		font-weight: 400;
		line-height: .6rem;
		margin-top: .3rem
	}

	.m_index_skill_new_container_title {
		width: 3.25rem;
		height: .65rem;
		background-image: url(https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png);
		background-size: 100% 100%;
		background-repeat: no-repeat
	}

	.m_index_skill_new_container {
		width: 100%;
		height: 4.7rem;
		background-image: url(https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		border-radius: .6rem
	}

	.m_index_skill_new {
		position: relative;
		box-sizing: border-box;
		padding: .3rem .5rem
	}

	.swiper {
		height: 300rpx;
	}

	.m_index_box_new_container {
		width: 100%;
		height: 4.2rem;
		border-radius: .6rem;
		background: #fff;
		position: relative;
		overflow: hidden
	}

	.m_index_box_new {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: .3rem .5rem;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(.63%, #ff5454), color-stop(80.65%, #f4f4f4));
		background: -webkit-linear-gradient(top, #ff5454 .63%, #f4f4f4 80.65%);
		background: linear-gradient(180deg, #ff5454 .63%, #f4f4f4 80.65%)
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.index-box3 {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%
	}

	.a-indexbox {
		width: 20%;
		text-align: center;
		display: block;
		float: left;
		font-size: 0;
		line-height: 0
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #eeeeee;
	}

	.header {}

	.index-a {
		width: 20%;
		text-align: center;
		display: block;
		float: left;
		font-size: 0;
		line-height: 0
	}

	.index-a img {
		width: 1.8rem;
		height: 1.7rem;
		margin-top: .6rem
	}

	.index-a span {
		display: block;
		margin-top: .3rem;
		color: #595959;
		text-align: center;
		font-size: .6rem;
		font-style: normal;
		font-weight: 400;
		line-height: .6rem
	}
</style>